<template>
    <div style="width: 100%;height: 100%;padding: 1px;display: flex;flex-direction: row;position:relative;">
        <div style="width: 100%;height: 100%;background-color: skyblue;" ref="topo001"></div>
        <div style="position: absolute;right: 1px;top: 1px;z-index: 999;display: flex;flex-direction: column;padding: 2px;gap: 5px;">
            <el-button size="mini" round @click="addTable" style="width: 100px;margin-left: 0 !important;">
                添加表格
            </el-button>
            <el-button size="mini" round @click="addWarning" style="width: 100px;margin-left: 0 !important;">
                节点告警
            </el-button>
            <el-button size="mini" round @click="addEffect" style="width: 100px;margin-left: 0 !important;">
                节点动效
            </el-button>
            <el-button size="mini" round @click="lineAddEffect" style="width: 100px;margin-left: 0 !important;">
                线条流动
            </el-button>
            <el-button size="mini" round @click="lineAddMark" style="width: 100px;margin-left: 0 !important;">
                线条打标记
            </el-button>
            <el-button size="mini" round @click="lineAddMark2" style="width: 100px;margin-left: 0 !important;">
                标记添加事件
            </el-button>
        </div>
        <div style="position: absolute;left: 1px;bottom: 1px;z-index: 999;display: flex;flex-direction: column;padding: 2px;gap: 5px;">
        </div>
    </div>
</template>
<script>
    import {
        Stage, Layer, Node, Link, TipNode, randomColor,
        LShapeLink, ImageNode, HtmlNode
    } from '@jtopo/core';
    import {RipplingNode} from '@jtopo/extensions';
    import {Editor} from '@jtopo/editor';

    export default {
        data() {
            return {
                stage: null,
                layer: null,
                nodes: [],
                links: [],
            }
        },
        mounted() {
            this.initTopo();
        },
        methods: {
            lineAddMark2(){
                // 给标记添加点击事件
                const link = this.links[9];
                const flashMarkNode = this.stage.effectSystem.linkMark(link, {
                    // 闪电符号
                    text: '⚡️ ',
                    font: '22px serif',
                });
                flashMarkNode.addEventListener('click', () => {
                    alert('查看/弹出闪电详情');
                });
            },
            lineAddMark(){
                // 给连线打一个标记效果
                const link = this.links[8];
                link.setStyles({ strokeStyle: 'red' });
                this.stage.effectSystem.linkMark(link, {
                    // 符号
                    text: '💢️',
                    // 字体
                    font: '16px serif',
                });
            },
            lineAddEffect(){
                const link = this.links[4];
                link.setStyles({
                    'strokeStyle': 'red'
                });
                // 线条流动动效
                this.stage.effectSystem.flow(link).play();
            },
            addEffect(){
                let phone = this.layer.querySelector('[text="Scrambler"]');
                // 动效
                const aeNode = new RipplingNode(null);
                aeNode.pointerEnabled = false;
                aeNode.resize(60, 60);
                aeNode.ae({
                    color: 'orange'
                });
                phone.addChild(aeNode);
            },
            addWarning(){
                let wdm = this.layer.querySelector('[text="Center"]');
                const alarm = new TipNode("一级告警");
                alarm.pointerEnabled = false;
                alarm.setStyles({
                    padding: 3,
                    fillStyle: 'red'
                });
                alarm.bottom = -wdm.height;
                alarm.x = -wdm.width/2;
                wdm.addChild(alarm);
                wdm.setStyles({
                    filter: 'invert(30%)',
                    color: 'red'
                });
                this.stage.effectSystem.flash(alarm, { tiems: 10, duration: 2000 }).play();
            },
            addTable(){
                // 表格
                let htmlNode = new HtmlNode(null, 0, 225, 160, 100);
                htmlNode.setHtml(`
                    <style>
                        table {
                            font-size: 12px;
                            width: 100%;
                            border-collapse: collapse;
                            font-family: Arial, sans-serif;
                        }
                        th, td {
                            border: 1px solid #ddd;
                            padding: 4px;
                            text-align: left;
                        }
                        th {
                            background-color:#2775B6;
                            color:white;
                        }
                    </style>
                    <table>
                        <thead>
                            <tr>
                                <th>告警设备</th>
                                <th>指标</th>
                                <th>阈值</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr style="color:red">
                                <td>WDM</td>
                                <td>20</td>
                                <td>30</td>
                            </tr>
                            <tr>
                                <td>Encoder</td>
                                <td>21</td>
                                <td>31</td>
                            </tr>
                            <tr>
                                <td>STB</td>
                                <td>22</td>
                                <td>32</td>
                            </tr>
                        </tbody>
                    </table>
                `);
                this.layer.addChild(htmlNode);
            },
            //初始化+事件学习
            initTopo() {
                this.stage = new Stage(this.$refs.topo001);
                this.layer = new Layer(this.stage);
                this.node(-387, -72, 'icon_firewall.png', 'Satellitte Feed');
                this.node(-379, 23, 'icon_firewall.png', 'Off air');
                this.node(-379, 138, 'icon_firewall.png', 'Programing');

                const r1 = this.node(-293, -160, 'icon_router.png');
                const r2 = this.node(-293, -120, 'icon_router.png');
                const r3 = this.node(-293, -80, 'icon_router.png');
                const r4 = this.node(-293, -40, 'icon_router.png');
                const r5 = this.node(-293, 0, 'icon_router.png', 'Encoder');
                const r6 = this.node(-193, 0, 'icon_router.png', 'Scrambler');

                const linkr16 = this.linkNode(r1, r6);
                this.linkNode(r2, r6);
                this.linkNode(r3, r6);
                this.linkNode(r4, r6);
                this.linkNode(r5, r6);

                const r7 = this.node(-293, 60, 'icon_router.png');
                const r8 = this.node(-293, 100, 'icon_router.png');
                this.linkNode(r7, r6);
                this.linkNode(r8, r6);

                const dataCloud = this.node(-100, 0, 'icon_switcher.png');
                this.links.push(new Link(null, dataCloud, r6));

                const tw130 = this.node(0, 0, 'icon_server.png',"Center");
                this.links.push(new Link(null, tw130, dataCloud));

                const pstn = this.node(-100, 100, 'icon_switcher.png');
                this.linkNode(pstn, tw130);

                this.layer.addChildren(this.links);
                this.layer.addChildren(this.nodes);
            },
            linkNode(nodeA, nodeZ, text) {
                const link = new LShapeLink(text, nodeA, nodeZ);
                link.setStyles({
                    'lineWidth': 3,
                    'strokeStyle': randomColor()
                });
                this.links.push(link);
                return link;
            },
            //添加节点
            node(x, y, img, name) {
                const node = new ImageNode(name,x, y,35,35);
                node.setImage(require('./t002/icons/' + img));
                this.nodes.push(node);
                return node;
            },

        },
    }
</script>
<style lang="scss">
    //引用外部scss，不能使用scoped
    @import './t002/CustomTooltip';
    @import './t002/CustomPopupMenu';
</style>